<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
</head>
<style>
    #id {
        display: flex;
        align-items: center;
        justify-content: space-around;
    }
</style>

<body>
    <div id="id">
        商品图片:<img :src="imgsrc" width="100" alt="">
        商品单价：<span>{{price}}元</span>
        商品数量：<span @click='dda'>-</span> <span>{{sum}}</span> <span @click='add'>+</span>
        商品总价：<span>{{sum*price}}</span>
    </div>

    <!-- 实现输入确定后生成 -->
    <div id="create">
        添加名单<input  type="text">
        <input type="radio" v-model="pick" v-bind:value="a" />
    </div>
    <script>
        vm.pick === vm.a
        Vue.config.productionTip = false;
        // 商品计算单价
        const vm = new Vue({
            el: '#id',
            data: {
                price: 14,
                sum: 1,
                imgsrc: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.jj20.com%2Fup%2Fallimg%2Fmx12%2F0F420115037%2F200F4115037-11.jpg&refer=http%3A%2F%2Fpic.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638364964&t=b3ec9fe954fcf0a433e21521e3ad093a',
            },
            methods: {
                dda() {
                    if (this.sum > 1) {
                        this.sum--
                    } else {
                        this.sum = 1
                    }
                },
                add() {
                    this.sum++
                }
            }
        })


        const create = new Vue({
            el: '#create',
            methods: {

            }
        })
    </script>
</body>

</html>